import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image} from '@tarojs/components'
import {AtForm,AtInput,AtIcon,AtButton, AtActionSheet, AtActionSheetItem, AtTextarea} from 'taro-ui'
import './confirmsuifangfangan.css'
import app from '../../../../main.js'
import reactMixin from 'react-mixin';
import myJs from './confirmsuifangfanganJs.js'

export default class ConfirmSuifangfangan extends Component {
    config = {
        navigationBarTitleText: '编辑随访方案'
    }

    constructor () { 
        super(...arguments); 
        this.state = this.getData(); 
    }

    init() {
        this.setState({
            isOpen1: false,
            isOpen2: false,
            time_ranage: [[], []],
            current_item_index: 0
        });

        this.initTimeRange();

        // 第一次进入页面才初始化一次，从患教资料页面返回后不再初始化
        if (!app.isEmpty(this.state.template.id) && app.flow.kps.length == 0) {
            this.getTemplate();
        } else if (app.flow.kps.length > 0) {
            this.addKpContent();
        }
    }

    initTimeRange() {
        var arr = [];
        for (var i = 1; i <= 100; i++) {
            arr.push(i);
        }

        var types = ['天', '周', '月'];
        var time_ranage = [];
        time_ranage.push(arr);
        time_ranage.push(types);

        this.setState({
            time_ranage: time_ranage
        });
    }

    onTimeChange(e) {
        var amount = this.state.time_ranage[0][e.detail.value[0]];
        var time_type = this.state.time_ranage[1][e.detail.value[1]];
        var current_item_index = this.state.current_item_index;

        var template = this.state.template;
        var items = template.items;
        items[current_item_index].amount = amount;
        items[current_item_index].time_type = time_type;
        template.items = items;

        this.setState({
            template: template
        });
    }

    onCurrentItemIndex(v) {
        this.setState({
            current_item_index: v
        });
    }

    changeOpen1(v) {
        this.setState({
            isOpen1: v,
            texaShow: !v
        });
    }

    clickOpen1(date_type) {
        var template = this.state.template;
        template.date_type = date_type;
        this.setState({
            template: template
        });
        this.changeOpen1(false);
    }

    changeOpen2(v) {
        this.setState({
            isOpen2: v,
            texaShow: !v
        });
    }
    
    onShowOpen2(v) {
        this.onCurrentItemIndex(v);
        this.changeOpen2(true);
    }

    clickOpen2(v) {
        if (v == '患教资料') {
            app.navigateTo('../aiyanPolular/aiyanPolular?current_item_index='+this.state.current_item_index+'&type='+this.state.template.type);
            return;
        }
        if (v == '随访表单') {
            return;
        }

        var template = this.state.template;
        var items = template.items;
        var current_item_index = this.state.current_item_index;
        var item = items[current_item_index];
        var content = item.content;
        var one = {
            type: v,
            content: this.typeToContent(v),
            relate_id: 0
        };
        content.push(one);

        item.content = content;
        items[current_item_index] = item;
        template.items = items;
        this.setState({
            template: template
        });

        this.changeOpen2(false);
    }

    // 添加患教资料
    addKpContent() {
        var flow = app.flow;
        if (flow.length == 0) {
            return;
        }

        var list = flow.kps;
        var current_item_index = flow.current_item_index;
        var template = this.state.template;
        var items = template.items;
        var item = items[current_item_index];
        var content = item.content;
        
        for (var i = 0; i < list.length; i++) {
            var one = list[i];
            var c_item = {
                type: '患教资料',
                content: one.title,
                relate_id: one.id
            };
            content.push(c_item);
        }

        items[current_item_index].content = content;
        template.items = items;
        template.type = flow.type;
        this.setState({
            template: template
        });

        app.flow = {
            kps: [],
            current_item_index: 0,
            type: ''
        };
    }

    deleteContent(t_index, c_index) {
        var template = this.state.template;
        var items = template.items;
        var item = items[t_index];
        var content = item.content;
        content.splice(c_index, 1);

        item.content = content;
        items[t_index] = item;
        template.items = items;
        this.setState({
            template: template
        });
    }

    typeToContent(type) {
        if (type == '用药提醒') {
            return '为了您的尽快康复，请记得遵照医嘱按时按量服药哦。';
        } else if (type == '复诊提醒') {
            return '该回院复诊了哦，请您于近日返院进行复诊复查，包括视力，眼前后节炎症反应情况、眼压、眼表完整性等检查。';
        } else if (type == '换药提醒') {
            return '该换药了，请及时换药哦。';
        } else if (type == '手术提醒') {
            return '请您于近日至医院进行手术。';
        }
    }

    addItem() {
        var template = this.state.template;
        var items = template.items;
        var item = {
            time_type: '天',
            amount: 1,
            content: []
        };
        items.push(item);
        template.items = items;
        this.setState({
            template: template
        });
    }

    deleteItem(index) {
        var template = this.state.template;
        var items = template.items;
        if (index == 0) {
            return;
        }
        items.splice(index, 1);

        template.items = items;
        this.setState({
            template: template
        });
    }

    go=(url)=>{
        app.redirectTo(url);
    }

    // 跳转到文章详情
    toArticle(type, id) {
        if (app.isEmpty(id)) {
            return id;
        }
        if (type == '患教资料') {
            app.navigateTo('../aiyanPolularVideo/aiyanPolularVideo?kepuid='+id);
        }
        if (type == '随访表单') {
        }
    }

    onContentChange(i_index, c_index, e) {
        var template = this.state.template;
        var items = template.items;
        var item = items[i_index];
        var content = item.content;
        content[c_index].content = e.target.value;

        item.content = content;
        items[i_index] = item;
        template.items = items;
        this.setState({
            template: template
        });
    }

    onLinechange(i_index, c_index, e) {
        var template = this.state.template;
        var items = template.items;
        var item = items[i_index];
        var content = item.content;
        content[c_index].height = e.detail.heightRpx;

        item.content = content;
        items[i_index] = item;
        template.items = items;
        this.setState({
            template: template
        });
    }
    
    render () {
        return (
            <View className='confirm-suifangfangan'>
                <AtActionSheet isOpened={this.state.isOpen1} cancelText='取消' onCancel={ this.changeOpen1.bind(this, false) } onClose={ this.changeOpen1.bind(this, false) }>
                    <AtActionSheetItem onClick={ this.clickOpen1.bind(this, '就诊') }>就诊</AtActionSheetItem>
                    <AtActionSheetItem onClick={ this.clickOpen1.bind(this, '手术') }>手术</AtActionSheetItem>
                    <AtActionSheetItem onClick={ this.clickOpen1.bind(this, '出院') }>出院</AtActionSheetItem>
                    <AtActionSheetItem onClick={ this.clickOpen1.bind(this, '咨询') }>咨询</AtActionSheetItem>
                </AtActionSheet>
                   <AtActionSheet isOpened={this.state.isOpen2} cancelText='取消' onCancel={ this.changeOpen2.bind(this, false) } onClose={ this.changeOpen2.bind(this, false) }>
                        <AtActionSheetItem onClick={ this.clickOpen2.bind(this, '用药提醒') }>用药提醒</AtActionSheetItem>
                        <AtActionSheetItem onClick={ this.clickOpen2.bind(this, '复诊提醒') }>复诊提醒</AtActionSheetItem>
                        <AtActionSheetItem onClick={ this.clickOpen2.bind(this, '换药提醒') }>换药提醒</AtActionSheetItem>
                        <AtActionSheetItem onClick={ this.clickOpen2.bind(this, '手术提醒') }>手术提醒</AtActionSheetItem>
                        <AtActionSheetItem onClick={ this.clickOpen2.bind(this, '患教资料') }>患教资料</AtActionSheetItem>
                        {/* <AtActionSheetItem onClick={ this.clickOpen2.bind(this, '随访表单') }>随访表单</AtActionSheetItem> */}
                   </AtActionSheet>
                <AtForm className=' class_0'>
                    <AtInput placeholder='请输入标题' border={false} value={this.state.template.title} onChange={this.handleChange.bind(this, 'template.title')}></AtInput>
                </AtForm>
                <View className=' class_1'>
                    <View>
                        <Text className=' class_2'>随访开始时间</Text>
                    </View>
                    <View onClick={this.changeOpen1.bind(this, true)}>
                        <Text className=' class_3'>{this.state.template.date_type}</Text>
                        <AtIcon value='chevron-right' className=' class_4'></AtIcon>
                    </View>
                </View>
                <View className=' class_5'>
                    {
                        this.state.template.items.map((item, index) => {
                            return (
                                <View>
                                    <View className=' class_6'>
                                        <View className=' class_7'>
                                            <View className={index == 0 ? 'class_8' : 'class_33'}></View>
                                            <Image className=' class_9' onClick={this.deleteItem.bind(this, index)} src={index == 0 ? app.imageUri+'img/icon-circle-blue3.png' : app.imageUri+'img/icon-jian2.png'}></Image>
                                            <View className=' class_10'></View>
                                        </View>
                                        <View className=' class_11'>
                                            <View className=' class_12'>
                                                <View className=' class_13'>
                                                    <Text className=' class_14'>{this.state.template.date_type}后</Text>
                                                </View>
                                                <View className=' class_15' onClick={this.onCurrentItemIndex.bind(this, index)}>
                                                    <Picker mode='multiSelector' range={this.state.time_ranage} onChange={this.onTimeChange}>
                                                        <View className='picker'>
                                                            <Text className=' class_16'>后{item.amount}{item.time_type}</Text>
                                                            <AtIcon value='chevron-down' className=' class_17'></AtIcon>
                                                        </View>
                                                    </Picker>
                                                </View>
                                            </View>
                                        </View>
                                    </View>
                                    <View className=' class_18'>
                                        <View className=' class_19'>
                                            <View className=' class_20'></View>
                                        </View>
                                        <View className=' class_21'>
                                            <View className=' class_22'>
                                                <View className=' class_23' onClick={this.onShowOpen2.bind(this, index)}>
                                                    <Text className=' class_24'>向患者发送</Text>
                                                    <AtIcon value='chevron-right' className=' class_25'></AtIcon>
                                                </View>
                                                {
                                                    item.content.map((one, c_index) => {
                                                        return (
                                                            <View className=' class_26'>
                                                                <View>
                                                                    <Text className=' class_27'>{one.type}：</Text>
                                                                </View>
                                                                {
                                                                    one.type == '患教资料' || one.type == '随访表单' ?
                                                                    (
                                                                        <View className=' class_28' onClick={this.toArticle.bind(this, one.type, one.relate_id)}>
                                                                            <Text className='class_59'>{one.content}</Text>
                                                                        </View>
                                                                    ):
                                                                    (
                                                                        <View className=' class_28' style={this.state.texaShow ? '' : 'display:none;'} onClick={this.toArticle.bind(this, one.type, one.relate_id)} >
                                                                            <AtTextarea
                                                                                value={one.content}
                                                                                onChange={this.onContentChange.bind(this, index, c_index)}
                                                                                onLinechange={this.onLinechange.bind(this, index, c_index)}
                                                                                count={false}
                                                                                className='txa_p'
                                                                                height={one.height}
                                                                                placeholderStyle='font-size:28rpx'
                                                                            />
                                                                        </View>
                                                                    )
                                                                }
                                                                <View>
                                                                    <AtIcon value='close-circle' size='20' className=' class_30' color='#999999' onClick={this.deleteContent.bind(this, index, c_index)}></AtIcon>
                                                                </View>
                                                            </View>
                                                        )
                                                    })
                                                }
                                            </View>
                                        </View>
                                    </View>
                                </View>
                            )
                        })
                    }

                    <View className=' class_66'>
                        <View className=' class_67'>
                            <Image className=' class_68' src={app.imageUri+'img/icon-add-green.png'} onClick={this.addItem.bind(this)}></Image>
                        </View>
                        <View className=' class_69'>
                            <View className=' class_70'>
                                <View className=' class_71'>
                                    <Text className=' class_72' onClick={this.addItem.bind(this)}>添加随访次数</Text>
                                </View>
                            </View>
                        </View>
                    </View>
                </View>
                <View className='blank'></View>
                <View className='class_73'>
                    {
                        !app.isEmpty(this.state.template.id) && this.state.template.type == '个人' ?
                        (
                            <View className=' class_74'>
                                <View className=' class_75'>
                                    <AtButton className=' class_76' onClick={this.deleteTemplate.bind(this)}>
                                        <Text className=' class_77'>删除计划</Text>
                                    </AtButton>
                                </View>
                                <View>
                                    <AtButton className=' class_78' onClick={this.updateTemplate.bind(this)}>
                                        <Text className=' class_79'>保存计划</Text>
                                    </AtButton>
                                </View>
                            </View>
                        ) : (!app.isEmpty(this.state.template.id) && this.state.template.type == '系统' ? (
                            <View>
                                <AtButton className=' class_88' onClick={this.copyTemplate.bind(this)}>
                                    <Text className=' class_79'>保存为我的计划</Text>
                                </AtButton>
                            </View>
                        ) : (app.isEmpty(this.state.template.id) ? (
                            <View>
                                <AtButton className=' class_88' onClick={this.createTemplate.bind(this)}>
                                    <Text className=' class_79'>保存计划</Text>
                                </AtButton>
                            </View>
                        ) : (null)))
                    }
                </View>
            </View>
        );
    }
}
reactMixin.onClass(ConfirmSuifangfangan,myJs);